<template>
  <!--订单交易信息-->

  <el-card class="w-9/12 h-full mr-0.5 px-5 py-5 cart-box">
    <template #header>
      <div class="card-header flex items-center color4">
        <i class="iconfont icon-gaishantongji" style="font-size: 24px;"/>
        <span class="font-semibold text-xl inline-block ml-2">{{$t('common.OrderTionTnfor')}}</span>
      </div>
      <div class="divider"></div>
    </template>
    <template v-if="orderList.length">
      <orderItem v-for="(item,index) in orderList" :key="index" :item="item" :index="index"/>
    </template>
    <el-empty v-else :description="$t('mes.noDataYet')" />
  </el-card>

</template>

<script setup>
import '@/assets/font/iconfont.css'
import orderItem from './orderItem.vue'
import { getSoTop } from '@/api/warehouse/warehouseApi'
import { ref } from 'vue'


const orderList = ref([])
const getList =async ()=>{
  try {
    let res= await getSoTop()
    orderList.value = res.data
  }catch (e) {
    console.log(e)
  }

}

getList()
</script>


<style scoped lang="scss">
.divider {
  width: 100%;
  height: 1px;
  background-color: #ccc;
  margin-top: 8px;
}

.scrollbar-box {
  padding: 10px;

  .el-scrollbar__view {
    padding: 16px;

  }
}

.cart-box {
  margin-right: 20px;
}

:deep(.el-card__body) {
  margin-top: -10px;
}

</style>
